<template>
    <div class="custom">
        <p style="color: red">{{ customProps }}</p>
        <ZxButton @click="onClick">自定义按钮（emit事件触发）</ZxButton>
        <p>-------</p>
        <ZxButton @click="handler">自定义按钮（自定义事件触发）</ZxButton>
    </div>
</template>

<script>

export default {
    name: 'CustomContent',

    props: {
        handler: {
            type: Function,
            default: _ => _,
        },

        customProps: {
            type: String,
            default: '',
        },
    },

    methods: {
        onClick() {
            this.$emit('emitEvent');
        },
    },

};
</script>

<style lang="scss">
    .custom {
        height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
</style>
